<template>
<div>
    <div class="main-contion">
        <div class="navv">
            <!-- <div class="navv-font">{{userName}}</div>
        <div >{{organizationName}}</div>-->
            <van-row>
                <van-col :span="12">
                    <div class="navv-font">{{userName}}</div>
                    <div>{{organizationName}}</div>
                    <div>{{workYear}}</div>
                </van-col>
                <van-col :span="12" style="text-align: right;">
                    <div>
                        <van-image round width="5rem" height="5rem" :src="user.picPath" style="margin-top: 20px;" />
                    </div>
                    <div style="margin-right: 0.5rem;">
                        <!-- <van-button size="small" type="default" @click="handleGo()">登出</van-button> -->
                    </div>
                </van-col>
            </van-row>
        </div>

        <van-grid>
            <van-grid-item icon="underway-o" text="加班备案" is-link to="jbgl" style="color:#4293f4" />
            <van-grid-item icon="wap-home-o" text="请休假" is-link to="qxjgl" style="color:#4293f4" />
            <van-grid-item icon="home-o" text="离穗报备" is-link to="lsbb" style="color:#4293f4" />
            <van-grid-item icon="tosend" text="出国境" is-link to="cgjgl" style="color:#4293f4" />
        </van-grid>

        <van-row style="background: #f2f6f9;">
            <van-col :span="24">
                <div class="navt">
                    <van-swipe class="my-swipe" :autoplay="5000" indicator-color="white">
                        <van-swipe-item style class @click="tiaozhuan('qxjgl')">
                            <div class="bg1">请休假管理</div>
                        </van-swipe-item>
                        <van-swipe-item style="background: #4293f4;" @click="tiaozhuan('jbgl')">
                            <div class="bg2">加班管理</div>
                        </van-swipe-item>
                    </van-swipe>
                </div>
            </van-col>
            <!-- <van-col span="12">
        <div class="fuck" @click="tiaozhuan('qxjgl')">请休假管理</div>
      </van-col>
      <van-col span="12">
        <div class="fuck" @click="tiaozhuan('jbgl')">加班管理</div>
        </van-col>-->
        </van-row>
        <van-card style="margin-top:0px;height:730px;">
            <template #tags>
                <div>
                    <h2 style=" margin-bottom: 10px; margin-top: 10px;">请休假</h2>
                    <van-cell title="待办理销假" :value="daibanlixiaojia" is-link to="xj" />
                    <van-cell title="待审核假单：" :value="daishenhejiadan" is-link to="dshqxj" />
                    <!-- <van-cell title="待确认销假" :value="querenxiaojia"  is-link to="xj"/> -->
                    <van-cell title="已审核请休假" :value="yshqxj" is-link to="yshqxj" />
                </div>
                <div>
                    <h2 style=" margin-bottom: 10px; margin-top: 10px;">加班</h2>
                    <!-- <van-cell title="待办理销假" :value="0" /> -->
                    <van-cell title="待审核加班：" :value="daishenhejiaban" is-link to="jbsh" />
                    <!-- <van-cell title="待确认销假" :value="1" /> -->
                </div>
                <div>
                    <h2 style=" margin-bottom: 10px; margin-top: 10px;">离穗</h2>
                    <!-- <van-cell title="公休假离开广州" :value="gongxiulikaiguangzhou" is-link to="xjlsbb" /> -->
                    <!-- <van-cell title="因公离穗备案" :value="ygbalgz" is-link to="gxjjrlkgz" /> -->
                    <van-cell title="公休假离开广州" is-link to="xjlsbb" />
                    <van-cell title="因公离穗备案" is-link to="gxjjrlkgz" />
                </div>
                <div>
                    <h2 style=" margin-bottom: 10px; margin-top: 10px;">出国境</h2>
                    <van-cell title="填写回执单" :value="tianxiehuizhidan" is-link to="txhzdList" />
                    <van-cell title="收回证件" :value="shouhuizhengjian" is-link to="dshzj" />
                    <van-cell title="人事处发证" :value="renshichufazheng" is-link to="rscfz" />
                    <van-cell title="待审核出国境" :value="daishenhechuguojing" is-link to="cgjsh" />
                </div>
            </template>
        </van-card>
    </div>
    <van-row>
        <!-- <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>-->
        <!-- <div class="shouy_zhuanli">
      <ul>
        <li>
          <dl>
            <dt class="f18">休假管理</dt>
          </dl>
          <div class="you_text f18">
            <div @click="tiaozhuan('qxjgl')">
              <span style="float: left;margin-top:30px">请休假管理</span>
              <img src="${ctx}/assets/mobile/images/qj.png" style="width: 100px; margin-left: 30px" />
            </div>
          </div>
        </li>
        <li>
          <dl>
            <dt class="f18">加班管理</dt>
          </dl>
          <div class="you_text f18">
            <div @click="tiaozhuan('jbgl')">
              <span style="float: left;margin-top:30px">加班管理</span>
              <img src="${ctx}/assets/mobile/images/jb.png" style="width: 145px; margin-top: 10px " />
            </div>
          </div>
        </li>
      </ul>
      </div>-->

        <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="search" to="/bl">办理</van-tabbar-item>
            <van-tabbar-item icon="friends-o" to="/indexxj">新建</van-tabbar-item>
            <!-- <van-tabbar-item icon="setting-o">统计</van-tabbar-item> -->
            <van-tabbar-item icon="manager-o" to="/wode">我的</van-tabbar-item>
        </van-tabbar>
    </van-row>
</div>
</template>

<script>
import Vue from "vue";
import Cookies from "js-cookie";
import logo from "../assets/tx.png";
import header_bg from "../assets/header_bg.png";
import {
    Lazyload
} from "vant";
import {
    findList
} from "@/api/fy";
import request from '@/utils/request'
Vue.use(Lazyload);
export default {
    data() {
        return {
            active: 0,
            logo,
            header_bg,
            userId: "",
            userName: "",
            organizationName: "",
            workYear: "",
            workDate: "",
            isProbation: "",

            daibanlixiaojia: '',
            daishenhejiadan: '',
            querenxiaojia: '',
            yshqxj: '',
            daishenhejiaban: '',
            gongxiulikaiguangzhou: '',
            ygbalgz: '',
            tianxiehuizhidan: '',
            shouhuizhengjian: '',
            renshichufazheng: '',
            daishenhechuguojing: '',
            user: {}

        };
    },
    created() {
        this.userId = Cookies.get("userId");
        this.userName = Cookies.get("userName");
        this.workYear = "工龄" + Cookies.get("workYear") + "年";
        this.organizationName = Cookies.get("organizationName");
        this.initialization();
        this.user = this.$store.state.user;
        this.user.picPath = this.$store.state.user.picPath;
        // this.user.picPath = sessionStorage.getItem('baseURL') + this.$store.state.user.picPath;
        // this.user.picPath =  `${sessionStorage.getItem('baseURL')} ${this.user.picPath}`;
        console.log(request, 233333333)
    },
    methods: {
        tiaozhuan(type) {
            this.$router.push({
                path: "/" + type
            });
        },
        handleGo() {
            this.$router.push(`/login`);
        },
        zhuanfunction(data) {
            let ret = '';
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }
            return ret;
        },
        //初始化函数
        initialization() {
            const that = this
            //待办理销假
            const ddd = {
                page: "1",
                limit: "10",
                queryType: "LEAVE",
                dataLimitType: "1",
                status: "41",
                userId: Cookies.get('userId')
            };

            // findList(ddd).then(function (res) {
            //     console.log(res, 2222222222222)
            //     that.daibanlixiaojia = res.data.total
            // });

            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: "leaveQuery/getBaseRecordListView",
                data: this.zhuanfunction(ddd)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response, 'is ok') //请求成功返回的数据
                // alert(response.data.data.total)
                this.daibanlixiaojia = response.data.data.total
            })

            //待审核假单
            const a = {
                page: "1",
                limit: "10",
                queryType: "LEAVE",
                dataLimitType: "3",
                status: "2",
                userId: Cookies.get('userId')
            };
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: "leaveQuery/getBaseRecordListView",
                data: this.zhuanfunction(a)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response, 'is ok') //请求成功返回的数据
                // alert(response.data.data.total)
                this.daishenhejiadan = response.data.data.total
            })

            //确认销假
            const b = {
                page: "1",
                limit: "10",
                queryType: "LEAVE",
                dataLimitType: "1",
                status: "21",
                userId: Cookies.get('userId')
            };
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: "leaveQuery/getBaseRecordListView",
                data: this.zhuanfunction(b)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                // alert(response.data.data.total)
                this.querenxiaojia = response.data.data.total
            })

            //已审核请休假
            const bv = {
                page: "1",
                limit: "10",
                queryType: "LEAVE",
                dataLimitType: "4",
                status: "",
                userId: Cookies.get('userId')
            };
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: "leaveQuery/getBaseRecordListView",
                data: this.zhuanfunction(bv)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                // alert(response.data.data.total)
                this.yshqxj = response.data.data.total
            })

            //待审核加班
            const c = {
                page: "1",
                limit: "10",
                queryType: "work",
                dataLimitType: "3",
                status: "2",
                userId: Cookies.get('userId')
            };
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: "leaveQuery/getBaseRecordListView",
                data: this.zhuanfunction(c)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                // alert(response.data.data.total)
                this.daishenhejiaban = response.data.data.total
            })

            //公休离开广州
            const e = {
                page: "1",
                limit: "10",
                queryType: "LEAVEGZ",
                recordType: "TRIP_LEAVE_GUANGZHOU",
                dataLimitType: "1",
                status: "",
                userId: Cookies.get('userId')
            };
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: "leaveQuery/getBaseRecordListView",
                data: this.zhuanfunction(e)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                // alert(response.data.data.total)
                this.gongxiulikaiguangzhou = response.data.data.total
            })

            //因公备案离开广州
            const f = {
                page: "1",
                limit: "10",
                queryType: "LEAVEGZ",
                recordType: "TRIP_BUSINESS",
                dataLimitType: "1",
                status: "",
                userId: Cookies.get('userId')
            };
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: "leaveQuery/getBaseRecordListView",
                data: this.zhuanfunction(f)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                // alert(response.data.data.total)
                this.ygbalgz = response.data.data.total
            })

            //填写回执单
            const fs = {
                page: "1",
                limit: "10",
                recordType: "ABROAD",
                dataLimitType: "3",
                status: "42",
                userId: Cookies.get('userId')
            };
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: "abroadQuery/getAbroadListView",
                data: this.zhuanfunction(fs)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                // alert(response.data.data.total)
                this.tianxiehuizhidan = response.data.data.total
            })

            //收回证件
            const gg = {
                page: "1",
                limit: "10",
                recordType: "ABROAD",
                dataLimitType: "3",
                status: "43",
                userId: Cookies.get('userId')
            };
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: "abroadQuery/getAbroadListView",
                data: this.zhuanfunction(gg)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                // alert(response.data.data.total)
                this.shouhuizhengjian = response.data.data.total
            })

            //人事处发证
            const ad = {
                page: "1",
                limit: "10",
                recordType: "ABROAD",
                dataLimitType: "3",
                status: "44",
                userId: Cookies.get('userId')
            };
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: "abroadQuery/getAbroadListView",
                data: this.zhuanfunction(ad)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                // alert(response.data.data.total)
                this.renshichufazheng = response.data.data.total
            })

            //待审核出国境
            const zz = {
                page: "1",
                limit: "10",
                recordType: "ABROAD",
                dataLimitType: "3",
                status: "2",
                userId: Cookies.get('userId')
            };
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: "abroadQuery/getAbroadListView",
                data: this.zhuanfunction(zz)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                // alert(response.data.data.total)
                this.daishenhechuguojing = response.data.data.total
            })

        }
    }
};
</script>

<style>
.swiper-slide.head_banner {
    height: 223px;
    background-color: #2163e0;
}

.head .sous {
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    margin: auto;
    width: 92%;
    z-index: 999;
}

.head .sous p {
    background-color: none;
    height: 32px;
    border-radius: 4px;
    border: none;
    font-size: 20px;
    padding-left: 0.3rem;
    color: #fff;
    background: none;
    background-size: 0.3rem;
}

.shang_gj_shouy .swiper-slide {
    width: 100%;
}

.gong_sy_img {
    position: relative;
    height: 110px;
}

.bgbl {
    background: #f2f6f8;
}

.shagnb_gongj_k {
    padding: 0.2rem;
    margin: 0;
    overflow: hidden;
}

.shang_gj_shouy .swiper-slide {
    background: none;
}

.kuaij_dh ul li {
    margin-bottom: 0px;
}

.shouy_news_haih_zhuangl ul li.no::before {
    background: #4293f4;
    width: 80%;
    height: 4px;
    border-radius: 0;
}

.shouy_zhuanli {
    padding: 0;
    background: #f2f6f8;
}

.shouy_zhuanli li {
    border: none;
    background: #fff;
    overflow: hidden;
    margin: 0 0.2rem 0.2rem 0.2rem;
}

.shouy_zhuanli li dl {
    width: 20%;
    float: left;
    margin-left: -1px;
    border-right: solid 1px #eee;
    text-align: center;
    background-color: #4293f4;
    color: #fff;
}

.shouy_zhuanli li .you_text span {
    display: inline-block;
    width: 120px;
    text-align: center;
    height: 50px;
    padding-top: 20px;
    color: #333333;
}

.shouy_zhuanli li .you_text {
    width: 80%;
}

.f18 {
    font-size: 16px;
}

.shouy_zhuanli li dl dt {
    padding-top: 15px;
}

.fuck {
    text-align: center;
    margin-top: 15px;
    margin-bottom: 5px;
}

.navv {
    background: url("../assets/header_bg.png") no-repeat;
    height: 180px;
    padding: 0 20px;
    color: #fff;
    line-height: 48px;
    background-size: cover;
}

.navv-font {
    font-size: 20px;
    padding-top: 5px;
}

.van-grid-item__text {
    color: #000000;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

.van-card {
    background-color: #f2f6f9;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}

.navt {
    width: 90%;
    margin: 1rem auto;
    background: #f2f6f9;
}

.bg1 {
    background: url("../assets/zjskypt.png") no-repeat;
    /* background: #5b31fe; */
    background-size: cover;
}

.bg2 {
    background: url("../assets/ts.png") no-repeat;
    /* background: #5b31fe; */
    background-size: cover;
}

.main-contion {
    overflow: auto;
    height: 860px;
}
</style>

